<template>
    <div class="xxlHintRoot">
        <div class="ctx" :class="cla" v-if="show" :style="{top:(height+10)+'px'}" @transitionend="closeXxlHint()">
            <div class="con">{{ text }}</div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'XxlHint',

    data() {
        return {
            show: false,
            cla: "closeed",
            height: "20"
        };
    },

    mounted() {
        let that = this
        uni.getSystemInfo({ "success"(d) { that.height = d.statusBarHeight } })
    },
    props: {
        text: {
            default: ""
        }
    },
    watch:{
        cla(d){
            this.$emit('change', d);
        }
    },
    methods: {
        open() {
            this.show = true
            this.$nextTick(() => {
                this.cla = 'show'
            });
        },
        closeXxlHint() {
            if (this.cla == 'show') {
                setTimeout(() => {
                    this.cla = 'close'
                }, 500)
            }else if(this.cla == 'close'){
                this.cla = 'closeed'
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "../xxl-scss/xxl.scss";

.xxlHintRoot {
    
}

.ctx {
    min-height: 40px;
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    background: $xxl-color-success;
    align-items: center;
    transition: opacity .3s ;
}

.con {
    width: 80%;
    text-align: center;
}

.show {
    opacity: 1;
    left: calc(50% - 150px);
    width: 300px;
}

.close {
    opacity: 0;
    left: calc(50% - 150px);
    width: 300px;
}
.closeed{
    opacity: 0;
    left: 50%;
    width: 0;
}</style>